<template>
	<view class="index">
		<view class="index-bgcImg">
			<image src="../../static/common/myTop.png" mode=""></image>
		</view>
		<view class="index-top">
			<view class="index-top-avatar">
				<image :src="avatar" mode=""></image>
			</view>
			<view class="index-top-name">
				{{hospitalName}}
			</view>
			<view class="index-top-hospilal">
				<view class="">

				</view>
				<!-- <view class="">
					成都市武侯区人民南路三段14号
				</view> -->
			</view>
			<view class="index-top-order">
				<view class="index-top-order-item" v-for="(item,index) in order" :key="item.id">
					<view class="index-top-order-item-num">
						{{item.num}}
					</view>
					<view class="index-top-order-item-name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="index-order">
			<view class="index-order-head">
				<view class="index-order-head-left">
					最新工单信息
				</view>
				<view class="index-order-head-left-right" @tap="refresh">
					<view class="index-order-head-right-a">
						刷新
					</view>
					<view class="index-order-head-right-icon">
						<image src="../../static/refresh.png" mode="" style="width: 28rpx;height: 28rpx;"></image>
					</view>
				</view>
			</view>
			<view class="index-order-list" @tap="jumpDetail(item.id,item.user.nickname,item.warranty_id)" :key="item.id"
				v-for="(item,index) in orderList">
				<view class="index-order-list-title">
					{{item.type_data}}
				</view>
				<!-- createtime_text  时间   user.nickname 工程师名称     -->
				<view class="index-order-list-msg">
					{{item.createtime_text}}{{','}}{{item.user.nickname?item.user.nickname:'平台'}}{{item.title}}
				</view>
				<!--status  0未读  1已读   -->
				<view class="index-order-list-sign" v-if="item.status==0">
				</view>
			</view>
			<empty v-if="orderList.length==0"></empty>
		</view>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	import changetype from '../../utils/changetype.js'
	export default {
		components: {
			empty
		},
		data() {
			return {
				avatar: '', //头像
				hospitalName: '', //医院名称
				order: [{
					id: 0,
					name: '已报修',
					num: 56
				}, {
					id: 0,
					name: '进行中',
					num: 16
				}, {
					id: 0,
					name: '已完成',
					num: 105
				}],
				orderList: [],
				page: 1 ,//分页
				last_page:1//
			}
		},
		onLoad() {
			this.getUserInfo()

		},
		onShow() {
			this.orderList=[],
			this.page=1,
			this.last_page=1
			/* 首页数据 */
			this.getIndexInfo()
		},
		methods: {

			/* 详情跳转 */
			jumpDetail(id, naem_,warranty_id) {
				/* 
				   user_name该订单执行人  
				 "id": 2, //工作流详情
                  "warranty_id": 1, //工单id
				  */
				uni.navigateTo({
					url: '../order-detail/order-detail?id=' + id + '&type=' + 1 + '&user_name=' + naem_+'&warranty_id='+warranty_id
				})
			},
			/* 刷新数据 */
			refresh() {
				this.orderList=[],
				this.page=1,
				this.last_page=1
				this.getIndexInfo()
			},
			/* 底部工单数据 */
			getIndexInfo() {
				/* 首页工单数据 */
				this.$https.post('/hospital/getNum').then(res => {
					this.order[0].num = res.data.repair //已报修
					this.order[1].num = res.data.hand //进行中
					this.order[2].num = res.data.done //已完成
				})
				/* 最新工单信息 */
				this.$https.post('/warranty/newest', {
					page: this.page
				}).then(res => {
					if (res.data.last_page > 0) {
						this.last_page = res.data.last_page
						if (res.data.data.length > 0) {
							let data_ = res.data.data
							data_.find(item => {
								item.type_data = changetype(item.type_data)
							})
							this.orderList = this.orderList.concat(data_)
						}
					}
				})
				
			},
			getUserInfo(){
				/* 获取用户信息 */
				this.$https.post('/user/getUser').then(res => {
					this.avatar = res.data.user.avatar //用户头像
					this.hospitalName = res.data.name //医院名称
					uni.setStorageSync('hospital_id',res.data.id)
				})
			}
		},
		onReachBottom() {
			if (this.page != this.last_page) {
				this.page = this.page + 1
				this.getIndexInfo()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.index {
		position: relative;

		&-order {
			min-height: 200rpx!important;
			position: relative;
			top: -48rpx;
			border-radius: 48rpx 48rpx 0px 0px;
			overflow: hidden;
			background-color: #F5F6F8;
			padding-bottom: 40rpx;

			&-list {
				position: relative;
				padding: 34rpx 26rpx;
				margin: 20rpx 32rpx 0;
				height: 96rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #FFFFFF;
				border-radius: 16rpx;

				&-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					line-height: 33rpx;
				}

				&-msg {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666F80;
					line-height: 33rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				&-sign {
					position: absolute;
					top: 52rpx;
					right: 20rpx;
					width: 12rpx;
					height: 12rpx;
					background-color: #FF3507;
					border-radius: 50%;
					z-index: 999999999999;
				}
			}

			&-head {
				padding: 40rpx 32rpx 28rpx;
				background: linear-gradient(180deg, rgba(26, 102, 255, 0.3) 0%, rgba(245, 246, 248, 0) 100%);
				display: flex;
				justify-content: space-between;

				&-left {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					line-height: 33rpx;

					&-right {
						display: flex;
						align-items: center;
					}
				}

				&-right {
					&-a {
						font-size: 24rpx;
						font-weight: 500;
						color: #979797;
						line-height: 28rpx;
						letter-spacing: 8rpx;
					}

					&-icon {}
				}
			}
		}

		&-top {
			background-color: $public-oclor;
			padding: 180rpx 34rpx 88rpx;

			&-avatar {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&-name {
				margin: 32rpx 0 26rpx;
				font-weight: 600;
				color: #FFFFFF;
				font-size: 40rpx;
			}

			&-hospilal {
				font-weight: 500;
				color: rgba(255, 255, 255, 0.7);
				line-height: 33rpx;
				font-size: 28rpx;
			}

			&-order {
				margin-top: 34rpx;
				height: 150rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				justify-content: center;
				align-items: center;

				&-item:nth-child(2) {
					border-left: 2rpx solid rgba(255, 255, 255, 0.2);
					;
					border-right: 2rpx solid rgba(255, 255, 255, 0.2);
					;
				}

				&-item {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					flex: 1;
					height: 100%;

					&-name {
						font-size: 24rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 0.6);
						line-height: 32rpx;
						letter-spacing: 8rpx;
					}

					&-num {
						font-size: 48rpx;
						font-weight: 540;
						color: #FFFFFF;
					}
				}
			}
		}


		&-bgcImg {
			position: absolute;
			z-index: 99;
			top: 0px;
			right: 0px;
			width: 384rpx;
			height: 368rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
